<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@page contentType="text/html;charset=UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<!--[if IE 9 ]><html class="ie9"><![endif]-->
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
        <meta name="format-detection" content="telephone=no">
        <meta charset="UTF-8">

        <meta name="description" content="Violate Responsive Admin Template">
        <meta name="keywords" content="Super Admin, Admin, Template, Bootstrap">

        <title>音乐资源</title>
            
        <!-- CSS -->
<link href="${pageContext.request.contextPath}/admin/css/bootstrap.min.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/admin/css/animate.min.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/admin/css/font-awesome.min.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/admin/css/form.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/admin/css/calendar.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/admin/css/media-player.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/admin/css/styl.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/admin/css/icons.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/admin/css/generics.css" rel="stylesheet">
 
  <link href="${pageContext.request.contextPath}/admin/jplayer/css/jplayer.blue.monday.min.css" rel="stylesheet" type="text/css" />
   <script src="${pageContext.request.contextPath}/admin/assets/js/jquery.min.js"></script>
    </head>
    <body id="skin-blur-violate">
        <header id="header" class="media">
            <a href="" id="menu-toggle"></a> 
        </header>
        
      
	<section class="p-relative" role="main">

		<!-- Sidebar -->
		<aside id="sidebar">

                
                <!-- Side Menu -->
                <ul class="list-unstyled side-menu">
                  <%--   <li>
                        <a class="sa-side-home" href="${pageContext.request.contextPath}/admin/index1.jsp">
                            <span class="menu-item">主页</span>
                        </a>
                    </li> --%>
                    <li class="active">
                        <a class="sa-side-typography" href="${pageContext.request.contextPath}/music/listadmin">
                            <span class="menu-item">音乐</span>
                        </a>
                    </li>
                    <li>
                        <a class="sa-side-widget" href="${pageContext.request.contextPath}/video/listadmin">
                            <span class="menu-item">视频</span>
                        </a>
                    </li>
                    
                    
                </ul>
                
            </aside>
            
            
            
<section id="content" class="container">
            
                  
                <!-- Breadcrumb -->
                <ol class="breadcrumb hidden-xs">
                     <a type="button" class="btn btn-xs" href="${pageContext.request.contextPath}/system/user/login">退出登陆</a>
                   <!--  <input type="button" name="Submit" onclick="javascript:history.back(-1);" value="返回上一页"> -->
                      <button class="btn btn-xs" onClick="javascript :history.go(-1);">返回上一页</button>
                </ol>
                
                <h4 class="page-title">音乐</h4>
                                
 
             <div class="col-md-5 col-sm-12 col-xs-12">
             	
                <!-- Deafult Table -->
                <div class="block-area" id="defaultStyle">
                    <h3 class="block-title">音乐信息</h3>
 
                    
                    <table class="table tile">
                        <thead>
								<tr>
									<th>编号</th>
									<th>音乐名</th>
									<th>歌手</th>
									<th>操作</th>
								</tr>
							</thead>
                        <tbody>
                        <c:forEach items="${list }" var="m">
                            <tr>
                                <td>${m.id}</td>
                                <td>${m.musicName}</td>
                                <td>${m.singer}</td>
                                <td> 
							      
							   
							       <!-- <a href="javascript: $("").jPlayer("setMedia", { mp3: "${m.urlmusic}"}).jPlayer("play"); ">bofang </a> -->
							     <%--  'musicURL' : "${pageContext.request.contextPath}/${m.urlmusic}",  --%>
							      <%-- <a href="${pageContext.request.contextPath}/${m.urlmusic}">下载</a> --%>
							       <a href="${pageContext.request.contextPath}/system/download?fileName=${m.urlmusic}">下载</a>
							   </td>
                            </tr>              
                  </c:forEach>
                        </tbody>
                    </table>
               共${requestScope.page.totalSize}条记录&nbsp;&nbsp;<span class="tooltip"></span>
               <div class="media text-center">
					<ul class="pagination">
						</a>
						</li>
						<li>${requestScope.pageString}
						</li>
						</a>
						</li>
					</ul>
				</div>
				
				
	<input type="hidden" value="${requestScope.page.totalPage}" id="totalPage"/> 
    <script type="text/javascript">
		$(document).ready(function(){
			$('.page_s').on('click',function(){
				var count=$(this).attr('lang');
				if(count <= parseInt($('#totalPage').val()) && count >= 1){
				window.location.href="${pageContext.request.contextPath}/music/listadmin?currentPage="+count;
				}
			});
			
			
		});
	
	</script>
   </div>
               
</div>
            
            
            
            
     <div class="col-md-7 col-sm-12 col-xs-12">
          
  <div id="jquery_jplayer_2" class="jp-jplayer"></div>
<br>
<div id="jp_container_2" class="jp-audio" role="application" aria-label="media player">
	<div class="jp-type-playlist">
		<div class="jp-gui jp-interface">
			<div class="jp-controls">
				<button class="jp-previous" role="button" tabindex="0">previous</button>
				<button class="jp-play" role="button" tabindex="0">play</button>
				<button class="jp-next" role="button" tabindex="0">next</button>
				<button class="jp-stop" role="button" tabindex="0">stop</button>
			</div>
			<div class="jp-progress">
				<div class="jp-seek-bar">
					<div class="jp-play-bar"></div>
				</div>
			</div>
			<div class="jp-volume-controls">
				<button class="jp-mute" role="button" tabindex="0">mute</button>
				<button class="jp-volume-max" role="button" tabindex="0">max volume</button>
				<div class="jp-volume-bar">
					<div class="jp-volume-bar-value"></div>
				</div>
			</div>
			<div class="jp-time-holder">
				<div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
				<div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
			</div>
			<div class="jp-toggles">
				<button class="jp-repeat" role="button" tabindex="0">repeat</button>
				<button class="jp-shuffle" role="button" tabindex="0">shuffle</button>
			</div>
		</div>
		<div class="jp-playlist">
			<ul>
				<li>&nbsp;</li>
			</ul>
		</div>
		<div class="jp-no-solution">
			<span>Update Required</span>
			
		</div>
	</div>
</div>
</div>

     

        </section>
       </section>
        <!-- Javascript Libraries -->
          <!-- jQuery -->
        <script src="${pageContext.request.contextPath}/admin/js/jquery.min.js"></script> <!-- jQuery Library -->
        
        <!-- Bootstrap -->
        <script src="${pageContext.request.contextPath}/admin/js/bootstrap.min.js"></script>
        
        <!-- UX -->
        <script src="${pageContext.request.contextPath}/admin/js/scroll.min.js"></script> <!-- Custom Scrollbar -->
        
        <!-- Other -->
        <script src="${pageContext.request.contextPath}/admin/js/calendar.min.js"></script> <!-- Calendar -->
        <script src="${pageContext.request.contextPath}/admin/js/feeds.min.js"></script> <!-- News Feeds -->
        
        
        <!-- All JS functions -->
        <script src="${pageContext.request.contextPath}/admin/js/functions.js"></script>

        
        
        
        <script type="text/javascript" src="${pageContext.request.contextPath}/admin/jplayer/js/jquery.min.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/admin/jplayer/js/jquery.jplayer.min.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/admin/jplayer/js/jplayer.playlist.min.js"></script>
	
	<script type="text/javascript">
	$(document).ready(function(){
		new jPlayerPlaylist({
		jPlayer: "#jquery_jplayer_2",
		cssSelectorAncestor: "#jp_container_2"
	}, [
	 <c:forEach items="${list}" var="m">
		{
			title:"${m.musicName}   ${m.singer}",
			mp3:"${pageContext.request.contextPath}/${m.urlmusic}",
//			oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"
		},
		  </c:forEach>
	], {
		swfPath: "js/jplayer",
		supplied: "oga, mp3",
		wmode: "window",
		useStateClassSkin: true,
		autoBlur: false,
		smoothPlayBar: true,
		keyEnabled: true
	});
	});
  </script>
        
        
    </body>
</html>

